<!--
 * @LastEditors: pmy
 * @LastEditTime: 2023-11-01 11:46:41
 * @FilePath: \bdcar-net\src\views\system\user\profile\index.vue
-->
<template>
   <div class="app-container">
      <el-row :gutter="20">
         <el-col :span="6" :xs="24">
            <el-card class="box-card">
               <template v-slot:header>
                  <div class="clearfix">
                     <span>个人信息</span>
                  </div>
               </template>
               <div>
                  <div class="text-center">
                     <userAvatar :user="state.user" />
                  </div>
                  <ul class="list-group list-group-striped">
                     <li class="list-group-item" v-for="v in formItems">
                        <svg-icon :icon-class="v.icon" />
                        <span>{{ v.label }}</span>
                        <div class="pull-right" v-if="v.key == 'deptName' && state.user.dept"
                           :title="state.user.dept.deptName + ' / ' + state.postGroup">
                           {{ state.user.dept.deptName }} / {{ state.postGroup }}
                        </div>
                        <div class="pull-right" v-else-if="v.key == 'roleGroup'" :title="state.roleGroup">
                           {{ state.roleGroup }}
                        </div>
                        <div class="pull-right" v-else :title="state.user[v.key]">{{ state.user[v.key] }}</div>
                     </li>
                  </ul>
               </div>
            </el-card>
         </el-col>
         <el-col :span="18" :xs="24">
            <el-card>
               <template v-slot:header>
                  <div class="clearfix">
                     <span>基本资料</span>
                  </div>
               </template>
               <el-tabs v-model="activeTab">
                  <el-tab-pane label="基本资料" name="userinfo">
                     <userInfo :user="state.user" />
                  </el-tab-pane>
                  <el-tab-pane label="修改密码" name="resetPwd">
                     <resetPwd />
                  </el-tab-pane>
               </el-tabs>
            </el-card>
         </el-col>
      </el-row>
   </div>
</template>
<script setup name="Profile">
import userAvatar from "./userAvatar";
import userInfo from "./userInfo";
import resetPwd from "./resetPwd";
import { getUserProfile } from "@/api/system/user";

const activeTab = ref("userinfo");
const state = reactive({
   user: {},
   roleGroup: {},
   postGroup: {}
});

function getUser() {
   getUserProfile().then(response => {
      state.user = response.data;
      state.roleGroup = response.roleGroup;
      state.postGroup = response.postGroup;
   });
};

const formItems = ref([
   { label: "账号", key: "userName", icon: "user" },
   { label: "创建日期", key: "createTime", icon: "date" },
   { label: "手机号码", key: "phonenumber", icon: "phone" },
   { label: "用户邮箱", key: "email", icon: "email" },
   { label: "所属部门", key: "deptName", icon: "tree" },
   { label: "所属角色", key: "roleGroup", icon: "peoples" },
])

getUser();
</script>
<style scoped lnag="scss">
:deep(.svg-icon) {
   margin-right: 4px !important;
}

.list-group-item {
   display: flex;
   align-items: center;
   height: 41px;

   >span {
      margin-right: 10px;
   }

   .pull-right {
      flex: 1;
      margin-left: auto;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
   }
}
</style>